<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎来到我们的系统</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.css"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css" type="text/css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/images/bg3.jpg") no-repeat center/cover;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* 欢迎卡片 */
        .welcome-card {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(1px);
            border-radius: 15px;
            padding: 40px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: fadeIn 1.5s ease-out;
            z-index: 2;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        /* 按钮样式 */
        .action-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 24px;
            border-radius: 15px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: none;
        }

        /* 按钮悬停效果 */
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 各模块按钮配色（高饱和渐变） */
.btn-home {
    background: linear-gradient(135deg, #63B3ED, #3182CE); /* 天蓝色 */
    color: white;
}

.btn-profile {
    background: linear-gradient(135deg, #9F7AEA, #6B46C1); /* 紫粉色 */
    color: white;
}

.btn-system {
    background: linear-gradient(135deg, #4FD1C5, #38B2AC); /* 薄荷绿 */
    color: white;
}

.btn-student {
    background: linear-gradient(135deg, #ED8936, #DD6B20); /* 橙色 */
    color: white;
}

.btn-class {
    background: linear-gradient(135deg, #FC8181, #E53E3E); /* 珊瑚红 */
    color: white;
}

.btn-score {
    background: linear-gradient(135deg, #FAF089, #ECC94B); /* 金黄色 */
    color: #4A5568;
}

.btn-course {
    background: linear-gradient(135deg, #9AE6B4, #48BB78); /* 翡翠绿 */
    color: white;
}

.btn-dormitory {
    background: linear-gradient(135deg, #B794F4, #805AD5); /* 薰衣草紫 */
    color: white;
}

.btn-task {
    background: linear-gradient(135deg, #F6AD55, #ED8936); /* 琥珀橙 */
    color: white;
}

.btn-data {
    background: linear-gradient(135deg, #63B3ED, #3182CE); /* 天蓝色（同首页，突出数据属性） */
    color: white;
}

.btn-opinion {
    background: linear-gradient(135deg, #FED7E2, #F687B3); /* 樱花粉 */
    color: #553C9A;
}


        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* 浮动元素 */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .floating-element {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

        /* 页脚 */
        footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-1000px) rotate(720deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .welcome-card {
                width: 90%;
                padding: 30px 20px;
            }

            h1 {
                font-size: 2rem;
            }

            p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 浮动背景元素 -->
    <div class="floating-elements" id="floatingElements"></div>

    <!-- 主要内容 -->
    <div class="welcome-card">
        <h1>🌿 欢迎回到数据小窝！</h1>
        <p>这里是专属于你的校园信息栖息地 ——
            我们用「数据」搭建屋顶，以「智能」铺设地板，将繁琐的管理事务化作窗前的月光，让每一次信息交互都像推开家门般自然。</p>
        <p>
            无论是初次踏入小窝的新成员，还是早已熟悉角落的 “老房客”，你都能在这里找到
        </p>
        <div class="action-buttons">
    <button class="btn btn-profile" onclick="location.href='/userinfo'">
       专属栖所
    </button>
    <button class="btn btn-system" onclick="location.href='/user_list'">
         运维调度舱
    </button>
    <button class="btn btn-student" onclick="location.href='/student_list'">
      学苗育护间
    </button>
    <button class="btn btn-class" onclick="location.href='/class_room_list'">
        班群聚理阁
    </button>
    <button class="btn btn-score" onclick="location.href='/score_list'">
       绩彩藏珍阁
    </button>
    <button class="btn btn-course" onclick="location.href='/course_list'">
       知韵课藏馆
    </button>
    <button class="btn btn-dormitory" onclick="location.href='/dormitory_list'">
        宿居安管处
    </button>
   <button class="btn btn-task" onclick="location.href='/task_list'">
         志途任务栈
    </button>
    <button class="btn btn-data" onclick="location.href='/data_list'">
        智资藏储阁
    </button>
    <button class="btn btn-opinion" onclick="location.href='/opinions_list'">
        谏言投递窗
    </button>
        </div>
    </div>

    <footer>
        © 2025 广东白云学院 | <a href="" style="color: #5FB878;">XiaoYoe</a> | <a href="/" style="color: #5FB878;">关于XiaoYoe的期末大作业</a>
    </footer>

    <script src="/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/layui/layui.js" type="text/javascript"></script>

    <script>
        // 创建浮动背景元素
        function createFloatingElements() {
            const container = document.getElementById('floatingElements');
            const elementCount = 15;

            for (let i = 0; i < elementCount; i++) {
                const element = document.createElement('div');
                element.classList.add('floating-element');

                // 随机大小
                const size = Math.random() * 100 + 50;
                element.style.width = `${size}px`;
                element.style.height = `${size}px`;

                // 随机位置
                element.style.left = `${Math.random() * 100}%`;
                element.style.top = `${Math.random() * 100 + 100}%`;

                // 随机动画
                element.style.animationDuration = `${Math.random() * 20 + 10}s`;
                element.style.animationDelay = `${Math.random() * 5}s`;

                container.appendChild(element);
            }
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            createFloatingElements();

            // 使用Layui的弹层组件
            layui.use('layer', function(){
                var layer = layui.layer;

                // 这里可以添加一些交互效果
                // 例如：layer.msg('欢迎访问我们的系统');
            });
        });
    </script>
</body>
</html>